<template>
  <v-card title="百分比堆叠面积图">
    <vcu-chart-line :data="chartData" :settings="settings" />
  </v-card>
</template>

<script>
export default {
  name: 'percent-stack-area',
  data() {
    return {
      chartData: {
        dimensions: {
          name: 'week',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        measures: [
          {
            name: 'Vue',
            data: [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
          },
          {
            name: 'React',
            data: [2000, 2000, 2600, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200],
          },
          {
            name: 'Angular',
            data: [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930],
          },
        ],
      },
      settings: {
        stack: {
          lang: ['Vue', 'React', 'Angular'],
          repo: ['Vue', 'React', 'Angular'],
        },
        areaStyle: {},
        areaStyle: {},
        yAxisLabelType: 'percentage',
        percentage: true,
        tooltipOptions: {
          formatter: function(params) {
            let [tar] = params
            const tooltipContent = params
              .map((v) => {
                return `${v.seriesName}：${(v.value[v.seriesIndex + 1] * 100).toFixed(2)} %`
              })
              .join('<br/>')
            return tar.name + '<br/>' + tooltipContent
          },
        },
      },
    }
  },
  methods: {},
  created() {},
}
</script>
<style lang="less" scoped>
</style>
